<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠侧边栏</title>
		<link rel="stylesheet" href="style.css">
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
	</head>
	<body>
		<nav>
			<div class="logo">
				<img src="./img/basketball2.png" alt="logo">
			</div>
			<ul>
				<li><a href="#">主页</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">课程介绍</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</nav>
		<header>
			<button id="toggle" class="toggle">
				<i class="fa fa-bars fa-2x"></i>
			</button>
			
			<h1>欢迎来到米修在线</h1>
			<p>隋炀帝杨广（569年～618年4月11日），本名杨英，小字阿𡡉，弘农华阴（今陕西省华阴市）人。</p>
			<button class="cta-btn" id="open">登录</button>
		</header>
		<div class="container">
			<h2>为什么选择米修在线？</h2>
			<p>隋炀帝杨广（569年～618年4月11日），本名杨英，小字阿𡡉，弘农华阴（今陕西省华阴市）人。</p>
			<p>隋朝第二位皇帝（604年～618年在位），隋文帝杨坚与文献皇后独孤伽罗嫡次子。 [1] </p>
			<h2>我们的教学宗旨</h2>
			<p>隋炀帝杨广（569年～618年4月11日），本名杨英，小字阿𡡉，弘农华阴（今陕西省华阴市）人。</p>
			<p>夏王窦建德追谥为闵皇帝，《全隋诗》录存其诗四十余首。</p>
			<h2>我们的优势</h2>
			<ul>
				<li>丰富的线上课程</li>
				<li>优秀的师资团队</li>
				<li>课后辅导及问答</li>
			</ul>
			<p>隋炀帝杨广（569年～618年4月11日），本名杨英，小字阿𡡉，弘农华阴（今陕西省华阴市）人。</p>
		</div>
		
		<!--模态框-->
		<div class="model-container" id="model">
			<div class="model">
				<button class="close-btn" id="close">
					<i class="fa fa-times"></i>
				</button>
				<div class="model-header">
					<h3>登录</h3>
				</div>
				<div class="model-content">
					<p>登录了解更多课程及促销活动</p>
					<form class="model-form">
						<div>
							<label for="name">姓名</label>
							<input type="text" class="form-input" id="name" placeholder="请输入姓名">
						</div>
						<div>
							<label for="email">邮箱</label>
							<input type="email" class="form-input" id="email" placeholder="请输入邮箱">
						</div>
						<div>
							<label for="password">密码</label>
							<input type="password" class="form-input" id="password" placeholder="请输入密码">
						</div>
						<div>
							<label for="password2">确认密码</label>
							<input type="password" class="form-input" id="password2" placeholder="请输入确认密码">
						</div>
						<input type="submit" value="提交" class="submit-btn">
					</form>
				</div>
			</div>
		</div>
	</body>
	<script src="index.js"></script>
</html>
